<!-- Type: text -->
<input ng-if="field.type == 'text'" ng-model="data[field.name]" name="{{field.name}}"
       maxlength="{{field.maxlength}}" type="text" class="form-control" ng-required="field.required"
       ng-readonly="field.readOnly" ng-pattern="field.pattern"/>

<!-- Type: email -->
<input ng-if="field.type == 'email'" ng-model="data[field.name]" name="{{field.name}}"
       maxlength="{{field.maxlength}}" type="email" class="form-control" ng-required="field.required"
       ng-readonly="field.readOnly"/>

<!-- Type: url -->
<input ng-if="field.type == 'url'" ng-model="data[field.name]" name="{{field.name}}"
       maxlength="{{field.maxlength}}" type="url" class="form-control" ng-required="field.required"
       ng-readonly="field.readOnly"/>

<!-- Type: password -->
<input ng-if="field.type == 'password'" ng-model="data[field.name]" name="{{field.name}}"
       maxlength="{{field.maxlength}}" type="password" class="form-control" ng-required="field.required"
       ng-readonly="field.readOnly"/>

<!-- Type: memo -->
<textarea ng-if="field.type == 'memo'" ng-model="data[field.name]" class="form-control" name="{{field.name}}"
          rows="{{field.rows}}" ng-required="field.required" maxlength="{{field.maxlength}}"
          ng-readonly="field.readOnly"></textarea>

<!-- Type selection -->
<select id="{{field.name}}" ng-if="field.type == 'selection'" ng-model="data[field.name]" class="form-control"
        ng-required="field.required"
        ng-options="item[field.itemId] as item[field.itemName] for item in field.items">
    <option value="">&nbsp;</option>
</select>

<!-- Type: multi-selection -->
<div ng-if="field.type == 'multi-selection'"
     class="multiSelect"
     multi-select
     input-model="field.items"
     button-label="name"
     item-label="name"
     tick-property="selected"
        ></div>

<!-- Type: multi-strings -->
<div ng-if="field.type == 'multi-strings'">
    <taglist tag-data="data[field.name]">
        <input/>
    </taglist>
</div>

<!-- Type: named entries -->
<div ng-if="field.type == 'namedEntries'">
    <ot-field-named-entries field="field" data="data"></ot-field-named-entries>
</div>

<!-- Type: multi form -->
<div ng-if="field.type == 'multi-form'">
    <ot-field-multi-form field="field" data="data" form-root="formRoot"></ot-field-multi-form>
</div>

<!-- Type: service configurator -->
<div ng-if="field.type == 'service-configurator'">
    <ot-field-service-configurator field="field" data="data" form-root="formRoot"></ot-field-service-configurator>
</div>

<!-- Date -->
<span ng-if="field.type == 'date'">
    <input ng-model="data.dates[field.name]" name="{{field.name}}" type="text" class="form-control"
           datepicker-popup="EEE dd MMM yyyy"
           is-open="opened"
            />
</span>

<!-- Date time -->
<span ng-if="field.type == 'dateTime'">
    <div class="row">
        <div class="col-md-7" style="vertical-align: middle">
            <input ng-model="data.dates[field.name]" name="{{field.name}}-date" type="text" class="form-control"
                   datepicker-popup="EEE dd MMM yyyy"
                   is-open="opened"
                    />
        </div>
        <div class="col-md-5 ot-timepicker" ng-model="data.times[field.name]">
            <timepicker show-meridian="false" minute-step="field.minuteStep"/>
        </div>
    </div>
</span>

<!-- Yes/no -->
<span ng-if="field.type == 'yesno'">
    <label class="radio-inline"><input type="radio" name="{{field.name}}" ng-value="true" ng-model="data[field.name]"/>
        Yes</label>
    <label class="radio-inline"><input type="radio" name="{{field.name}}" ng-value="false" ng-model="data[field.name]"/>
        No</label>
</span>

<!-- Color -->
<input ng-if="field.type == 'color'" ng-model="data[field.name]" name="{{field.name}}"
       type="color" class="form-control" ng-required="field.required"
       ng-readonly="field.readOnly" />

<!-- Type: int -->
<input ng-if="field.type == 'int'" ng-model="data[field.name]" name="{{field.name}}"
       type="number" class="form-control" ng-required="field.required"
       ng-readonly="field.readOnly" min="{{field.min}}" max="{{field.max}}" step="{{field.step}}"/>

<!-- Validation message -->
<p ng-show="thisForm[field.name].$invalid && !thisForm[field.name].$pristine" class="help-block">
    {{field.validation}}</p>

<!-- Help message -->
<span class="help-block" ng-if="field.help">
    <span ng-if="helpFile(field.help)"><span ng-include="helpFile(field.help)"></span></span>
    <span ng-if="!helpFile(field.help)">{{field.help}}</span>
</span>